<template>
	<view class="charts-box">
		<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script setup>
	import { ref,onMounted } from 'vue'
	
	const props = defineProps({
	  data: {
	    type: Array,
	    required: true
	  }
	})
	// 声明响应式数据
	const chartData = ref({});
	const opts = {
		color: ["#1890FF"],
		padding: [4, 4, 4, 4],
		legend: {
			// paddingBottom: "11", 
			position: "bottom", 
			fontColor:"#000",
			fontSize: "11",
			
		},
		enableScroll: false,
		extra: {
			pie: {
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: false,
				borderWidth: 3,
				borderColor: "#FFFFFF"
			}
		}
	};

	// 模拟从服务器获取数据的方法
	const getServerData = () => {
		setTimeout(()=>{
			const res = {
				series: [{
					data: props.data,
					}]
			}
			chartData.value = JSON.parse(JSON.stringify(res));
			// console.log(props.data)
		},100)
		
	}

	// 在组件挂载完成后调用 getServerData 方法
	// onMounted(() => {
		getServerData();
	// });
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 90vw;
		margin: 20rpx auto;
		height: 250px;
		background-color: #fff;
		border: 1px solid #ccc;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
	}
</style>